@mixin clamp($val:1) {
    @if ($val==1) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    } @else {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: $val;
        text-overflow: ellipsis;
    }
}

@mixin dropdownMenu($scale:1, $delay:0) {
    transform-origin: top right;
    transition: all 0.3s ease;
    transform: scale($scale);
    transition-delay: $delay;
}

@mixin boxShadow() {
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.07);
}

@mixin formWrap($col:4) {
    .form-wrap {
        display: grid;
        grid-template-columns: repeat($col, 1fr);
        column-gap: 30px;
        padding: 16px 24px;

        .col-two {
            grid-column: 1 / #{$col - 1};
        }

        .col-three {
            grid-column: 1 / #{$col};
        }

        .full {
            grid-column: 1 / #{$col + 1};
        }
        .five {
            grid-column: 1 / #{$col + 2};
        }
    }

}

@mixin dl-list($column:3, $column-gap:0, $row-gap:0, $show-border:1) {
    .dl-list {      
        flex: 1;
        display: grid;
        grid-template-columns: repeat($column, 100%/$column);
        grid-column-gap: $column-gap;
        grid-row-gap: $row-gap;
        flex-wrap: wrap;
        @if ($show-border==1) {
            border-top: 1px solid $border-color;
            border-left: 1px solid $border-color;
        }

        dl {
            width: 100%;
            display: flex;
            border-bottom: 1px solid $border-color;
            border-right: 1px solid $border-color;

            dt, dd {
                line-height: 24px;
                padding: 6px 0;
            }

            dt {
                min-width: 110px;
                text-align: right;
                border-right: 1px solid $border-color;
                background-color: $bg-color;
                padding-right: 10px;
            }

            dd {
                flex: 1;
                padding: 4px 10px;
            }
        }

        .full {
            grid-column: 1 /  #{($column+1)};
        }

        .two {
            grid-column: 2 /  #{($column+1)};
        }

    }

    .dl-list2 {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid $border-color;
        border-left: 1px solid $border-color;

        dl {
            width: 50%;
            display: flex;
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid $border-color;
            border-right: 1px solid $border-color;

            dt {
                min-width: 180px;
                text-align: right;
                border-right: 1px solid $border-color;
                background-color: $bg-color;
                padding-right: 10px;
            }

            dd {
                flex: 1;
                padding-left: 10px;

                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                word-break: break-all;
            }
        }

        .full {
            width: 100%
        }

        dl.auto-fill {
            height: inherit;

            dt {

            }

            dd {
                align-content: stretch;
            }
        }

    }
}

@mixin edl-list() {
    .edl-list {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid $border-color;
        border-left: 1px solid $border-color;
        border-right: 1px solid $border-color;
        border-bottom: 1px solid $border-color;

        dl {
            width: 50%;
            display: flex;
            line-height: 40px;

            dt {
                min-width: 110px;
                text-align: right;
                border-right: 1px solid $border-color;
                background-color: $bg-color;
                padding-left: 10px;
            }

            dd {
                text-align: left;
                padding-left: 10px;
            }
        }

        .full {
            width: 100%
        }

    }
}

@mixin info-list($column:3) {
    .info-list {
        display: grid;
        grid-template-columns: repeat($column, 100%/$column);
        grid-gap: 20px;
        padding: 16px 24px;

        dt {
            color: $font-color;
            margin-bottom: 8px;
        }

        dd {
            color: $tips-color;
        }

        .full {
            grid-column: 1 /  #{($column+1)};
        }
    }
}

@mixin data-title {
    .data-title {
        font-size: 16px;
        font-weight: bold;
        color: $title-color;
        line-height: 40px;
        border-bottom: 1px solid $border-color;
    }
}